<template>
  <div class="home-page">
    <div class="header">
      <div class="swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in imgList" :key="item.id"
            ><img
              class="swiperImg"
              :src="`http://liufusong.top:8080${item.imgSrc}`"
              alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>
      <div class="up">
        <div class="search">
          <div class="left">
            <div class="location" @click="$router.push('/city')">
              {{ cityNow }}<i class="iconfont icon-xiajiantou"></i>
            </div>
            <van-search v-model="value" placeholder="请输入小区或地址" />
          </div>
        </div>
        <div class="map" @click="$router.push('/map')"><i class="iconfont icon-ditu"></i></div>
      </div>
      <div class="nav">
        <div class="zhengzu icon">
          <img src="../assets/zhengzu.png" alt="" /><span>整租</span>
        </div>
        <div class="hezu icon">
          <img src="../assets/hezu.png" alt="" /> <span>合租</span>
        </div>
        <div class="ditu icon" @click="$router.push('/map')">
          <img src="../assets/ditu.png" alt="" /> <span>地图找房</span>
        </div>
        <div class="chuzu icon" @click="$router.push('/gorent')">
          <img src="../assets/chuzu.png" alt="" /> <span>去出租</span>
        </div>
      </div>
      <div class="group">
        <div class="head">
          <div class="title">租房小组</div>
          <div class="more">更多</div>
        </div>
        <div class="content">
          <div class="one box" v-for="item in groupList" :key="item.id"><img :src="`http://liufusong.top:8080${item.imgSrc}`" alt="" /><div class="txt"><span class="gr-title">{{item.title}}</span><br><span class="gr-txt">{{item.desc}}</span></div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHomeSwiper, getRentGroup, getCityList } from "@/api/search";
export default {
  name: "home-page",
  data() {
    return {
      value: "",
      imgList: [],
      groupList: [],
      cityNow: '',
      cityid:''
    };
  },
  async created() {
    this.getcityNow()
    this.HomeSwiper()
    this.getCityId(this.cityNow)
    this.RentGroup(this.cityid)
  },
  methods: {
    // 当前城市
    getcityNow() {
      this.cityNow = localStorage.getItem("cityNow") || '上海';
    },
    async getCityId(name) {
      const {body} = await getCityList(1)
      const arr = body.filter(item=>item.label===name)
      this.cityid = arr[0].value 
    },
    // 轮播图
    async HomeSwiper() {
      const { body } = await getHomeSwiper();
      this.imgList = body;
    },
    // 租房小组
    async RentGroup(id){
      const res = await getRentGroup(id)
      // console.log(res);
      this.groupList = res.body
    }
  },
};
</script>

<style lang="less" scoped>
.header {
  position: relative;
}
.up {
  display: flex;
  position: absolute;
  top: 5%;
  padding: 0 25px;
}
.van-search {
  width: 240px;
}
.search {
  width: 300px;
  display: flex;
  margin-right: 8px;
  background-color: #fff;
  height: 34px;
  border-radius: 5px;
  .left {
    // flex: 1;
    display: flex;
    .location {
      display: flex;
      width: 43px;
      padding-left: 7px;
      font-size: 14px;
      line-height: 34px;
    }
  }
  .map {
    width: 34px;
    height: 34px;
  }
}
.icon-ditu {
  font-size: 33px;
  color: #fff;
}
.icon-xiajiantou{
  font-size: 10px;
  color: #787d82;
  margin-left: 3px;
}
.nav {
  display: flex;
  justify-content: space-between;
  padding: 5px 15px 20px 15px;
  img {
    width: 60px;
    height: 60px;
    margin-bottom: 14px;
  }
  span {
    font-size: 14px;
  }
  .icon {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.group {
  width: 100%;
  height: 187px;
  background-color: #f6f5f6;
  padding: 0 5px;
  .head {
    height: 25px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    .title {
      font-weight: 700;
      font-size: 15px;
    }
    .more {
      font-size: 14px;
      color: #787d82;
      padding-right: 13px;
    }
  }
  .content {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-right: 10px;
    .box {
      display: flex;
      align-items: center;
      width: 172px;
      height: 60px;
      background-color: #fff;
      border-radius: 6px;
      margin-bottom: 10px;
      img{
        width: 50px;
        height: 50px;
        margin-left: 10px;
        margin-right: 20px;
      }
      .txt{
        font-size: 14px;
      }
      
    }
  }
}
.van-search {
  border-radius: 3px;
}
.van-field {
  padding: 0;
}
.my-swipe .van-swipe-item {
  .swiperImg {
    width: 100%;
    height: 212px;
  }
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>
